<template>
  <div class="shopHead">
  <div class="shopList">
    <!-- 商品列表区域-->
    <div class="mui-card" v-for="(item, i) in shopcarlist" :key="item.id">
    				<div class="mui-card-content">
    					<div class="mui-card-content-inner">
    						<mt-switch v-model="$store.getters.getBookSelected"></mt-switch>
                <img :src="item.imgurl" alt="">
    					 <div class="info">
                 <h1>{{item.title}}</h1>
                 <p>
                   <span class="price">￥{{item.sell_price}}</span>
                   <shopcar :goodsid="item.id" :incount="$store.getters.getGoodCount"></shopcar>
                   <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                 </p>
               </div>
              </div>
    				</div>
     </div>
    <!-- 结算区域-->
	 <div class="mui-card">
	 				<div class="mui-card-content">
	 					<div class="mui-card-content-inner jiesuan">
                <div class="left">
                  <p>总计{不含运费}</p>
                  <p>已勾选商品<span class="red">{{$store.getters.getBookMount.count}}</span>件，总价<span class="red">￥{{$store.getters.getBookMount.amount}}</span></p>
                </div>
                <mt-button type="danger" >去结算</mt-button>
	 					</div>
	 				</div>
	 			</div>

  </div>
  </div>
</template>

<script>
  import shopcar from'./subcompoments/shopcar_numbox.vue'
  export default{
    data(){
      return{
        shopcarlist:[
          {
            cou:1,
            id:45,
            title:'一人之下',
            sell_price:68,
            imgurl:"https://imgsa.baidu.com/forum/w%3D580/sign=eaa099887bcf3bc7e800cde4e101babd/f612a099a9014c08e3af4d20017b02087af4f451.jpg"
          },
          {
            cou:2,
            id:46,
            title:'我是大神仙',
            sell_price:22,
            imgurl:"https://manhua.qpic.cn/vertical/0/09_21_59_9cc0de380d9afe468d2f6f7a547a9408.jpg/420"
          },
          {
            cou:3,
            id:47,
            title:'修仙归来在校园',
            sell_price:32,
            imgurl:"https://manhua.qpic.cn/vertical/0/12_17_03_45a782453184e4c263b2f3f7aa71c572_1565600625712.jpg/420"
          }
        ]

      }
    },
    components:{shopcar},
    methods:{
      remove(id,index){
        //点击删除
            this.shopcarlist.splice(index,1)
      }
    }
  }
</script>

<style scoped>
  .mui-card-content-inner{
    display: flex;
    align-items: center;
  }
  .shopHead{
    background-color: #eee;
    overflow: hidden;
  }
  .shopList img{
    width: 60px;
    height: 60px;
    margin: 0 5px;
  }
  h1{
    font-size: 13px;
    margin: 15px 58px;
  }

  .info .price{
    color: red;
    font-weight: bold;
  }
 .jiesuan{
   display: flex;
   justify-content: space-between;
   align-items: center;

 }
 .red{
   color: red;
   font-size: 16px;
   font-weight: bold;
 }
</style>
